<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="referrer" content="no-referrer"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类-ChenZhen客栈-CZ的java学习日记</title>
  <meta name=”Description” Content=”ChenZhen的个人博客，博客分类页面，对ChenZhen发布的博客进行分类显示”>
  <meta name=”Keywords” Content=”ChenZhen,博客,博客分类,分类″>
  <link href="../static/images/favicon.ico" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" />
</head>
<body >

<!--导航-->
<div  class="cz-navbar fixed">
  <div class="cz-pc-menu">
    <a href="index.html" th:href="@{/}" class="cz-navbar-brand text-decoration-none"><strong th:text="${author}">ChenZhen</strong></a>
    <div class="cz-navbar-links fs-6 fw-light" id="cz-navbar-links">
      <a href="index.html"    th:href="@{/}" class="cz-nav-link">首页</a>
      <a href="tags.html"     th:href="@{/tags}" class="cz-nav-link cz-active-link">标签</a>
      <a href="archives.html" th:href="@{/archives}" class="cz-nav-link">归档</a>
      <a href="message.html"  th:href="@{/message}" class="cz-nav-link">留言板</a>
      <a href="friends.html"  th:href="@{/friends}" class="cz-nav-link">友链</a>
      <a href="https://www.travellings.cn/go.html" class="cz-nav-link">🚇开往</a>
      <a href="about.html"    th:href="@{/about}" class="cz-nav-link">关于我</a>
    </div>
    <a href="#" class="cz-navbar-brand" data-bs-toggle="modal" data-bs-target="#searchModal">
      <strong>搜索</strong>
    </a>


    <button class="cz-menu-toggle-btn">菜单</button>
  </div>
  <div class="cz-mobile-menu fw-light fs-6">
    <a href="index.html"    th:href="@{/}" class="cz-nav-link ">首页</a>
    <a href="tags.html"     th:href="@{/tags}" class="cz-nav-link cz-active-link">标签</a>
    <a href="archives.html" th:href="@{/archives}" class="cz-nav-link">归档</a>
    <a href="message.html"  th:href="@{/message}" class="cz-nav-link">留言板</a>
    <a href="friends.html"  th:href="@{/friends}" class="cz-nav-link">友链</a>
    <a href="https://www.travellings.cn/go.html" class="cz-nav-link">🚇开往</a>
    <a href="about.html"    th:href="@{/about}" class="cz-nav-link">关于我</a>
  </div>
</div>


<!-- 搜索框 -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content p-2 ">
      <div class="modal-body ">
        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="text-center fs-5 mb-3">搜　索</div>
        <div class="input-group mb-4">
                    <span class="input-group-text" id="basic-addon1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                    </span>
          <input id="keywordInput" type="text" class="form-control" placeholder="输入关键词" aria-describedby="basic-addon1">
        </div>

        <div class="mb-2">搜索结果</div>
        <!-- 搜索结果展示区域 -->
        <div id="searchResults" class="list-group">
        </div>
      </div>

    </div>
  </div>
</div>


<div  alt="" class="cz-bg-section cz-bg-img"
      style="height: 45vh;background-image:url('../static/images/tags.jpg')"
      th:style="'height: 45vh;background-image: url(' + @{/images/tags.jpg} + ')'">

  <div class="m-bg-class_cover" align="center">
    <p class="cz-page-title">- 🎨文章分类 -</p>
    <p class="cz-page-title2 fw-normal">Welcome to my website ——by 陈震 （Chen Zhen）</p>
  </div>

</div>

<div class="container mb-5" style="margin-top: -4em ">
  <div class="card shadow" style="opacity: 92%;">
    <div class="card-body">
      <form id="tagForm" action="/tags" th:if="${not #lists.isEmpty(tagList)}">
        <ul class="cz-tag-menu">
          <li th:each="tag : ${tagList}">
            <a class="cz-tag-link" href="#" th:data-tag-id="${tag.id}">
              <span class="me-1">#</span>
              <span th:text="${tag.name}">实用教程</span>
              <span th:text="${tag.blogCount}" class="cz-tag-count">25</span>
            </a>
          </li>

        </ul>
        <!-- 用于存储选择的标签ID的隐藏输入字段 -->
        <input type="hidden" id="selectedTags" name="tagIds" value="">
      </form>

    </div>
  </div>
</div>


<!--主要内容-->
<div class="container mb-6 p-md-5">

    <div class="row justify-content-between">
      <!--博文列表-->
      <div class="col-md-12">

        <!--博文-->
        <div class="d-none d-md-block">
          <div class="mb-5 d-flex justify-content-between" th:if="${not #lists.isEmpty(page.list)}" th:each="blog : ${page.list}">

            <div class="pr-3">
              <h2 class="mb-2 h4 fw-bold">
                <a class="fw-bold cz-link2 text-break" href="./article.html" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">最新版ES8的client API操作 Elasticsearch Java API client 8.0</a>
              </h2>
              <p class="fw-light cz-blog-description" th:text="${blog.description}" >
                我们在学习ES客户端时，一直使用的都是`Java High Level Rest Client`，在浏览官网时，发现官方给出的警告是：`Java REST` 客户端已被弃用.
              </p>
              <a class="card-text text-muted small" href="" th:href="@{/about}">
                ChenZhen
              </a>
              <div class="d-flex justify-content-between">
                <div class="text-muted d-flex align-items-center ">
                  <small class="me-3" th:text="${#temporals.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2023-12-12 17:52</small>
                  <div class="d-flex align-content-center">
                    <small class="d-flex align-items-center ">
                      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                      </svg>
                      <div class="me-3 ms-1" th:text="${blog.views}">1000</div>
                    </small>
                    <small class="d-flex align-items-center ">
                      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-chat-text" viewBox="0 0 16 16">
                        <path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
                        <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
                      </svg>
                      <div class="me-1 ms-1" th:text="${blog.commentCount}">1000</div>
                    </small>
                  </div>
                </div>
                <!--标签-->
                <div class="pe-5">
                  <span class="badge bg-secondary ms-1" th:each="tag : ${blog.tagList}" th:text="${tag.name}">Java</span>
                  <span class="badge bg-primary" th:if="${blog.copyright == 1}">原创</span>
                  <span class="badge bg-danger" th:if="${blog.copyright == 0}">转载</span>

                </div>
              </div>

            </div>
            <!--博文首图-->
            <div class="d-flex align-items-center">
              <img class="cz-blog-img" src="../static/images/recommendPicture.png" th:src="@{${blog.firstPicture}}">
            </div>

          </div>
        </div>

        <!--博文（移动端展示）-->
        <div class="d-md-none">
          <div class="mb-5" th:if="${not #lists.isEmpty(page.list)}" th:each="blog : ${page.list}">
            <div class="d-flex justify-content-between" >

              <h2 class="mb-2 h4 fw-bold">
                <a class="fw-bold cz-link2 text-break" href="./article.html" th:href="@{/blog/{id}(id=${blog.id})}" th:text="${blog.title}">最新版ES8的client API操作 Elasticsearch Java API client 8.0</a>
              </h2>

              <!--博文首图-->
              <div class="d-flex align-items-center">
                <img class="cz-blog-img" src="../static/images/recommendPicture.png" th:src="@{${blog.firstPicture}}">
              </div>

            </div>

            <p class="fw-light cz-blog-description" th:text="${blog.description}" >
              我们在学习ES客户端时，一直使用的都是`Java High Level Rest Client`，在浏览官网时，发现官方给出的警告是：`Java REST` 客户端已被弃用.
            </p>
            <a class="card-text text-muted small" href="" th:href="@{/about}">
              ChenZhen
            </a>
            <div class="d-flex justify-content-between">

              <div class="text-muted">
                <!--时间-->
                <small class="me-3" th:text="${#temporals.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2023-12-12 17:52</small>
                <div class="d-flex align-content-center">
                  <small class="d-flex align-items-center ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                    </svg>
                    <div class="me-3 ms-1" th:text="${blog.views}">1000</div>
                  </small>
                  <small class="d-flex align-items-center ">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-chat-text" viewBox="0 0 16 16">
                      <path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
                      <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"/>
                    </svg>
                    <div class="me-1 ms-1" th:text="${blog.commentCount}">1000</div>
                  </small>
                </div>
              </div>
              <!--标签-->
              <div>
                <span class="badge bg-secondary ms-1" th:each="tag : ${blog.tagList}" th:text="${tag.name}">Java</span>
                <span class="badge bg-primary" th:if="${blog.copyright == 1}">原创</span>
                <span class="badge bg-danger" th:if="${blog.copyright == 0}">转载</span>

              </div>
            </div>
          </div>
        </div>

        <!--分页-->
        <nav>
          <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${page.hasPreviousPage} ? 'page-item' : 'page-item disabled' ">
              <a class="page-link text-black" href="#" th:href="@{ '/tags?pageNum=' + ${page.prePage} + '&tagIds=' + ${currTagIds}}">上一页</a>
            </li>

            <li class="page-item"
                th:each="num : ${page.navigatepageNums}"
                th:classappend="${page.pageNum == num} ? 'page-item active' : 'page-item'">
              <a class="page-link text-black fw-bold" href="#" th:href="@{ '/tags?pageNum=' + ${num} + '&tagIds=' + ${currTagIds}}" th:text="${num}">1</a>
            </li>

            <li class="page-item" th:classappend="${page.hasNextPage} ? 'page-item' : 'page-item disabled' ">
              <a class="page-link text-black" href="#" th:href="@{ '/tags?pageNum=' + ${page.nextPage} + '&tagIds=' + ${currTagIds}}" >下一页</a>
            </li>
          </ul>
        </nav>

      </div>

    </div>

</div>

<!--底部栏-->
<footer class="border-top p-3 bg-white text-muted small">
  <div class="container pb-5 ">
    <div class=" d-flex align-items-center justify-content-between">
      <div>
        <span class="cz-navbar-brand mr-2"><strong th:text="${author}">ChenZhen</strong></span>我的博客已营业：<span id="htmer_time">1年105天8时13分28秒</span>
      </div>
      <div>
        <a target="_blank" class="text-secondary fw-bold" href="#">粤ICP备2022122083号-1</a>
      </div>
    </div>
  </div>
</footer>


<script src="../static/lib/bootstrap.bundle.min.js" th:src="@{/lib/bootstrap.bundle.min.js}"></script>
<script src="../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../static/lib/clickEffect.js" th:src="@{/lib/clickEffect.js}"></script>


<script>

    // 移动设备导航栏样式切换
    // 获取菜单切换按钮和移动设备菜单列表的引用
    const menuToggleBtn = document.querySelector('.cz-menu-toggle-btn');
    const mobileMenu = document.querySelector('.cz-mobile-menu');
    // 点击菜单切换按钮时的事件处理函数
    menuToggleBtn.addEventListener('click', () => {
      // 切换移动设备菜单列表的显示状态
      mobileMenu.classList.toggle('show');
    });
    // 页面加载时执行解析逻辑
    window.addEventListener('DOMContentLoaded', function() {
      //选择的标签ID
      var selectedTags = [];
      // 从地址栏解析tagIds参数
      var urlParams = new URLSearchParams(window.location.search);
      var tagIdsParam = urlParams.get('tagIds');
      var initialTagIds = tagIdsParam ? JSON.parse("[" + tagIdsParam + "]") : [];
      // 如果解析结果只有一个元素，也将其包装为数组
      if (!Array.isArray(initialTagIds)) {
        initialTagIds = [initialTagIds];
      }
      selectedTags = initialTagIds

      // 初始化时，将当前选择的标签设置active高亮
      var tagLinks = document.querySelectorAll('.cz-tag-link');
      tagLinks.forEach(function(link) {
        // 获取标签ID
        var linkTagId = parseInt(link.getAttribute('data-tag-id'));
        if (selectedTags.includes(linkTagId)) {
          link.classList.add('active');
        }
      });

      // 点击标签链接时触发事件
      var tagLinks = document.querySelectorAll('.cz-tag-link');
      tagLinks.forEach(function(link) {
        link.addEventListener('click', function(event) {
          event.preventDefault(); // 防止<a>标签默认的页面跳转
          var tagId = parseInt(this.getAttribute('data-tag-id'));
          // 检查标签是否已经被选择
          if (selectedTags.includes(tagId)) {
            // 如果已经选择，从数组中移除
            selectedTags = selectedTags.filter(function(id) {
              return id !== tagId;
            });
          } else {
            // 如果未选择，添加到数组
            selectedTags.push(tagId);
          }

          // 更新隐藏输入字段的值
          document.getElementById('selectedTags').value = selectedTags;
          // 提交表单
          document.getElementById('tagForm').submit();

        });
      });

    });



    // 运行时间统计
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }
    function setTime() {
        /*此处为网站的创建时间*/
      var create_time = Math.round(new Date(Date.UTC(2022, 8, 21, 15, 15, 15)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }
    setInterval(setTime, 1000);

    // 获取关键词输入框
    const keywordInput = $('#keywordInput');
    //搜索 当用户输入结束时触发事件
    keywordInput.on('input', function() {
      // 使用定时器延迟发送 AJAX 请求，以确保用户输入结束
      clearTimeout(this.timer);
      this.timer = setTimeout(function () {
        // 获取用户输入的关键词
        const keyword = keywordInput.val();
        // 发送 AJAX 请求
        $.ajax({
          url: '/search',
          method: 'GET',
          data: { keyword: keyword },
          success: function(response) {
            // 处理从后端返回的数据
            if (response.code === 20000){
              var resultList = response.data.blogs;
              // 获取搜索结果列表容器
              var searchResults = $('#searchResults');
              // 清空原来的结果
              searchResults.empty();
              if (resultList){
                // 渲染搜索结果列表
                resultList.forEach(function(blog) {
                  var blogItem = $('<a>').attr('href', `/blog/${blog.id}`).addClass('list-group-item list-group-item-action').text(blog.title);
                  searchResults.append(blogItem);
                });
              }
            }
          },
          error: function(error) {
            console.error('Error:', error);
          }
        });
      }, 1000); // 1000 毫秒延迟
    });



</script>
</body>
</html>
